<template>
	<el-container>
		<el-aside width="280px">
			<div class="title"><span class="iconfont icon-V icon"></span><span class="phoneBook">电话簿</span><el-link type="success" style="margin-left: 10px;" @click="showUseBook = true">使用手册<i class="el-icon-document el-icon--right"></i></el-link> </div>
			<el-tree ref="orgTree" :props="props" :load="loadNode" node-key="id" lazy accordion highlight-current
				style="margin-top: 46px;"  @current-change="handleNodeChange"></el-tree>
		</el-aside>
		<el-main>
			<div class="search">
				<el-input v-model="department" size="medium" prefix-icon="el-icon-office-building" clearable
					placeholder="请输入部门进行查询" class="search-input"></el-input>
				<el-input v-model="name" size="medium" prefix-icon="el-icon-s-custom" clearable placeholder="请输入姓名进行查询"
					class="search-input"></el-input>
				<el-input v-model="phone" size="medium" prefix-icon="el-icon-mobile-phone" clearable
					placeholder="请输入手机号进行查询" class="search-input"></el-input>
				<el-button type="primary" size="mini" icon="el-icon-search" @click="search(0)">全行查询</el-button>
				<el-button type="primary" size="mini" icon="el-icon-search" style="margin-left: 0;" @click="search(1)">
					当前部门查询</el-button>
			</div>
			<div v-if="showUseBook">
				<el-card class="box-card" shadow="always">
					<div slot="header">
						<i class="el-icon-document"></i> 使用手册
					</div>
					<el-row class="methodRow">
						<el-col :span="3" class="methodIndex">方法1：</el-col>
						<el-col :span="21">
							点击左侧 <span class="important">部门名称 / <i class="el-icon-caret-right"></i></span> 查询部门全部电话号码
						</el-col>
					</el-row>
					<el-row class="methodRow">
						<el-col :span="3" class="methodIndex">方法2：</el-col>
						<el-col :span="21">
							在上方输入框中输入 <span class="important">关键字</span>(部门、姓名、手机号) 进行【全行查询】
							<ol type="a">
								<li>按部门名称查询，如果要查询“科技处”电话，可在【部门】框中输入关键字“科技处”</li>
								<li>按姓名查询，如果要查询“李四”电话，可在【姓名】框中输入关键字“李四”</li>
								<li>按手机号查询，如果要查询“1234567”的用户，可在【手机号】框中输入关键字“123456”</li>
								<li>按多条件查询，如果要查询手机号为“1234567”的“李”姓用户，可在【姓名】框中输入关键字“李”，在【手机号】框中输入关键字“123456”</li>
							</ol>
						</el-col>
					</el-row>
					<el-row class="methodRow">
						<el-col :span="3" class="methodIndex">方法3：</el-col>
						<el-col :span="21">
							点击左侧 <span class="important">部门名称</span>，在上方输入框中输入 <span class="important">关键字</span>(部门、姓名、手机号) 进行【当前部门查询】
							<ol type="a">
								<li>按姓名查询，如果要查询科技处“李四”电话，可点击左侧 <span class="important">南宁中心支行>科技处</span>，在【姓名】框中输入关键字“李四”</li>
								<li>其他查询效果和【全行搜索】类似</li>
							</ol>
						</el-col>
					</el-row>
				</el-card>
			</div>
			<div v-else>
				<el-alert :title="'列表数据为' + (this.type ? '当前部门' : '全行') + '查询结果'" :closable="false" show-icon type="info"
					style="margin-bottom: 5px;"></el-alert>
				<el-table :data="tableData" :height="screenHeight - 167" border stripe header-cell-class-name="tableHeader"
					style="width: 100%;">
					<el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
					<el-table-column prop="name" label="姓名" align="center" min-width="100"></el-table-column>
					<el-table-column prop="department" label="部门" align="center" min-width="200"></el-table-column>
					<!-- <el-table-column prop="interPhone" label="内线电话" align="center" min-width="80"></el-table-column> -->
					<el-table-column prop="externalLine" label="外线电话" align="center" min-width="100"></el-table-column>
					<el-table-column prop="cellPhone" label="手机" align="center" min-width="100"></el-table-column>
					<!-- <el-table-column prop="fax" label="传真" align="center" min-width="100"></el-table-column> -->
					<el-table-column prop="email" label="邮箱" align="center" min-width="150"></el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
					:page-size="pageSize" :total="total" :page-sizes="[10, 20, 50, 100, 200]" background
					layout="total, sizes, prev, pager, next, jumper" class="pagination"></el-pagination>
			</div>
		</el-main>
	</el-container>
</template>

<script>
	import {
		getDeptRoot,
		getDepts,
		getPersons
	} from '@/api/data'
	export default {
    name: 'HelloWorld',
    data() {
      return {
        props: {
          label: 'name',
          children: 'children',
          isLeaf: 'leaf'
        },
        currentNode: {}, // 当前被选中的对象
        department: '',
        name: '',
        phone: '',
        showUseBook: true, // 是否展示使用手册
        tableData: [],
        total: 0, // 总记录数
        pageNum: 1, // 第几页
        pageSize: 20, // 每页显示记录数
        type: 0, // 在全行查询还是在当前部门查询
      }
    },
    watch: {
      currentNode() {
        if (this.type === 1) {
          this.pageNum = 1
          this.getData()
        }
      }
    },
    computed: {
      searchDeptsData() {
        return {
          parentId: this.currentNode.id,
          pageSize: this.pageSize
        }
      },
      searchPersonsData() {
        return {
          departmentId: this.type ? (this.currentNode.id || '') : '',
          department: this.department,
          name: this.name,
          phone: this.phone,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }
    },
    methods: {
      loadNode(node, resolve) {
        if (node.level === 0) {
          this.type = 0
          getDeptRoot().then(res => {
            var data = res.data
            return resolve(data)
          }).catch(() => {
            this.$message({
              showClose: true,
              mesaage: '查询机构信息失败!',
              type: 'error'
            })
            return resolve([])
          })
        } else {
          this.type = 1
          getDepts(this.searchDeptsData).then(res => {
            var data = res.data
            this.total = data.total
            return resolve(data.departmentArr)
          }).catch(() => {
            this.$message({
              showClose: true,
              message: '查询部门信息失败!',
              type: 'error'
            })
            return resolve([])
          })
        }
      },
      handleNodeChange(val) {
        this.type = 1
        this.currentNode = val
      },
      // 分页查询记录数
      getData() {
        this.showUseBook = false
        getPersons(this.searchPersonsData).then(res => {
          var data = res.data
          this.total = data.total
          this.tableData = data.personArr
        }).catch(() => {
          this.$message({
            showClose: true,
            message: '查询人员信息失败!',
            type: 'error'
          })
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.pageNum = 1
        this.getData()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getData()
      },
      search(type) {
        if (type === 1 && this.currentNode == undefined) {
          this.$message({
            showClose: true,
            message: '请点击左边机构/部门，再进行查询',
            type: 'warning'
          })
          return
        }
        if (type === 0) {
          this.currentNode = undefined
        }
        this.type = type
        this.getData()
      }
    }
  }
</script>

<style scoped>
	.el-container {
		height: calc(100% - 2px);
		border: 1px solid #f5f5f5;
	}

	.el-aside {
		background-color: #005293;
		color: #333;
		position: relative;
	}

	.title {
		position: fixed;
		top: 1px;
		z-index: 2;
		color: #CFEAFE;
		background-color: #005293;
		padding: 10px;
		width: 263px;
		text-align: left;
		box-sizing: border-box;
	}

	.icon,
	.phoneBook {
		font-size: 20px;
	}

	.icon {
		margin-right: 5px;
	}

	.phoneBook {
		font-weight: bold;
	}

	.el-tree {
		background-color: #005293;
	}

	.el-main {
		color: #333;
		text-align: left;
	}

	.search {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.search-input {
		width: 26%;
	}

	.box-card {
		margin-top: 40px;
	}
	.methodRow {
		margin-bottom: 20px;
	}
	.methodIndex {
		text-align: right;
		font-weight: bold;
	}
	ol li {
		margin-top: 8px;
	}

	.pagination {
		float: right;
		margin-top: 10px;
	}
	.important {
		color: red;
	}
</style>
<style>
	.tableHeader {
		background-color: #4FA2EA !important;
		color: #fff !important;
	}

	.el-table--striped .el-table__body tr.el-table__row--striped td {
		background-color: #CFEAFE !important;
	}

	.el-button--mini,
	.el-button--mini.is-round {
		padding: 3px 15px;
	}

	.el-tree-node__content {
		height: 36px;
		color: #fff;
	}
	.el-tree-node__content:hover {
		color: #2CAEFF;
		background-color: #CFEAFE;
	}
	.el-tree-node:focus>.el-tree-node__content {
		background-color: #CFEAFE;
		color: #2CAEFF;
	}
	.el-tree-node__label {
		font-size: 16px;
	}
	.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
		color: #005293;
	}
	
	.el-button--mini {
		font-size: 14px;
	}
	.el-input.is-active .el-input__inner,
	.el-input__inner:focus {
		border-color: #0C74D1;
		box-shadow: 3px 1px 20px rgba(0, 0, 0, 0.3);
	}
	.el-input__inner::-webkit-input-placeholder {
		color: #4FA2EA;
	}
	.el-input__inner::-moz-placeholder {
		color: #4FA2EA;
	}
	.el-input__inner:-ms-input-placeholder {
		color: #4FA2EA;
	}
	.el-input__inner::placeholder {
		color: #4FA2EA;
	}
	.el-input__prefix, .el-input__suffix {
		color: #4FA2EA;
	}
	.el-input__inner {
		color: #0C74D1;
		caret-color: #0C74D1;
		border-color: #4FA2EA;
	}
	
	.el-table {
		font-size: 16px;
	}
</style>
